<template>
  <div>
    <div v-if="this.$route.name == 'editionContent'" class="app-container">
      <el-card shadow="never">
        <el-table
          @row-click="chooseone"
          :data="list"
          border
          style="width: 100%"
          max-height="500"
          highlight-current-row
        >
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="radio" :label="scope.row.id">
                <span class="el-radio__label"></span>
              </el-radio>
            </template>
          </el-table-column>
          <!-- type="index"获取索引值，labal显示标题，prop 数据字段名 -->
          <el-table-column align="center" prop="editionItem" label="归档数据项" width="600"></el-table-column>
          <el-table-column align="center" prop="detail" label="详情">
            <template slot-scope="scope">
              <el-button @click="toEditonDetail(scope.row)" size="mini" type="primary">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
      radio: null, // 如果使用单选框，定义一个model值
      list: [
        { id: "1", editionItem: "中药材资源管理" },
        { id: "2", editionItem: "产地产区管理" },
        { id: "3", editionItem: "种植公司管理" }
      ]
    };
  },

  methods: {
    chooseone(row) {
      this.radio = row.id;
    },

    toEditonDetail(row) {
        this.chooseone(row);
        if (row.id == "1") {
            this.$router.push({
               name: 'medicinalEdition' 
            })
        }
        else if (row.id == "2") {
            this.$router.push({
               name: 'productbaseEdition' 
            })
        }
        else if (row.id == "3") {
            this.$router.push({
               name: 'companyEdition' 
            })
        }
    }
  }
};
</script>